<template>
    <el-dialog
        :width="isDanger ? '400px' : '700px'"
        :title="isDanger ? '预警' : '设备信息'"
        append-to-body
        :visible="visible"
        :class="[
            {
                1: 'is-danger-1',
                2: 'is-danger-2',
                3: 'is-danger-3',
                4: 'is-danger-4',
            }[isDanger],
            { 'is-danger': isDanger },
        ]"
        @update:visible="(val) => $emit('update:visible', val)"
    >
        <table class="data-table">
            <tr v-for="(item, index) in tableInfo" :key="index">
                <td>{{ item.key }}</td>
                <td>{{ item.value || "-" }}</td>
            </tr>
        </table>

        <div class="bottom-btn-box">
            <button @click="btnOne()" class="btn">位移过程</button>
            <button v-if="data.monitorTypeName === '表面位移'" @click="btnTwo()" class="btn">
                累计变形
            </button>
            <a
                class="btn a-href"
                target="_blank"
                href="http://10.200.1.3/makeng/warning-management/data-warning/surface-displacement-dw"
                >预警查看</a
            >
        </div>

        <!--       位移过程 -->
        <div class="popup-land-one" v-if="overflowOne">
            <img
                class="close-btn-one"
                @click="closePopup"
                src="@/asset/image/client/close-bg.png"
                alt=""
            />
            <PopupLineOne
                v-if="
                    data.monitorTypeName === '干滩' ||
                        data.monitorTypeName === '库水位' ||
                        data.monitorTypeName === '浸润线' ||
                        data.monitorTypeName === '降雨量'
                "
                class="line-big-box"
                :data="dataLine"
            />
            <PopupLineThree
                v-if="data.monitorTypeName === '表面位移'"
                class="line-big-box"
                :data="dataLine"
            />
            <PopupLineFour
                v-if="data.monitorTypeName === '内部位移'"
                class="line-big-box"
                :data="dataLineFour"
            />
        </div>

        <!--       累计变形 -->
        <div class="popup-land-two" v-if="overflowTwo">
            <img
                class="close-btn-two"
                @click="closePopup"
                src="@/asset/image/client/close-bg.png"
                alt=""
            />
            <PopupBar class="line-big-box" :data="dataTwo" />
        </div>
    </el-dialog>
</template>

<script>
import { Dialog } from "@/component/ElementUi";
import { Cesium } from "@/public/global/const";
import { FetchGetDisplacementProcessByMonitorTypeAll, FetchGetBdDataOne } from "@/api";
import PopupLineThree from "./PopupLineThree";
import PopupLineOne from "./PopupLineOne";
import PopupLineFour from "./PopupLineFour";
import PopupBar from "./PopupBar";
import { WarnLevelType, WarnType } from "@/public/global/enum";
import { WarnTypeMap } from "@/public/global/map";

export default {
    name: "TableDialog",
    components: {
        ElDialog: Dialog,
        PopupLineOne,
        PopupLineThree,
        PopupLineFour,
        PopupBar,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default() {
                return {};
            },
        },
    },

    data() {
        return {
            overflowOne: false,
            overflowTwo: false,
            dataLine: [],
            dataLineFour: [],
            dataTwo: [],
        };
    },

    computed: {
        tableInfo() {
            const data = this.data;
            if (this.isDanger) {
                return [
                    {
                        key: "测点名称",
                        value: data.monitorPointName,
                    },
                    {
                        key: "测点编号",
                        value: data.monitorCode,
                    },
                    {
                        key: "监测类型",
                        value: data.monitorTypeName,
                    },
                    {
                        key: "预警类型",
                        value: WarnTypeMap[data.warnType],
                    },
                    {
                        key: "预警原因",
                        value: data.description && data.description.split(";").join(";\n"),
                    },
                    {
                        key: "预警时间",
                        value: data.warnTime,
                    },
                ];
            }
            const position = Cesium.Cartesian3.fromDegrees(
                data.longitude,
                data.latitude,
                data.inith - 5 || 515,
            );
            return [
                {
                    key: "测点类型",
                    value: data.monitorTypeName,
                },
                {
                    key: "测点编号",
                    value: data.monitorCode,
                },
                {
                    key: "经纬度",
                    value: `${data.longitude},${data.latitude}`,
                },
                // {
                //     key: "三维坐标",
                //     value: JSON.stringify(position),
                // },
            ];
        },
        isDanger() {
            if (this.data.warnType === WarnType.Normal) {
                return 0;
            }
            if (this.data.warnType === WarnType.OffLine) {
                return 3;
            }
            return (
                {
                    [WarnLevelType.One]: 1,
                    [WarnLevelType.Two]: 2,
                    [WarnLevelType.Three]: 3,
                    [WarnLevelType.Four]: 4,
                }[this.data.warnLevel] || 0
            );
        },
    },

    watch: {
        data: {
            handler() {
                this.refreshList();
            },
        },
    },

    methods: {
        btnOne() {
            this.overflowOne = true;
            this.overflowTwo = false;
        },
        btnTwo() {
            this.overflowTwo = true;
            this.overflowOne = false;
        },
        closePopup() {
            this.overflowTwo = false;
            this.overflowOne = false;
        },
        refreshList() {
            FetchGetDisplacementProcessByMonitorTypeAll({
                monitorCode: this.data.monitorCode,
                monitorTypeId: this.data.monitorTypeId,
            }).then((res) => {
                if (this.data.monitorTypeName === "内部位移") {
                    this.dataLineFour = res.list.map((item) => item.dataList).flat();
                } else {
                    this.dataLine = res.list;
                }
                // this.dataLine = res.list;
                // this.dataLineFour = res.list.map((item) => item.dataList).flat().filter(Boolean); // 偷懒方法 不建议使用
            });

            FetchGetBdDataOne({
                monitorCode: this.data.monitorCode,
                timeType: this.data.monitorTypeId,
                startTime: this.data.startTime,
                endTime: this.data.endTime,
            }).then((res) => {
                this.dataTwo = res;
            });
        },
    },
};
</script>

<style lang="scss">
.is-danger-1 {
    .el-dialog {
        background-image: url("~@/view/client/component/TheCesiumMap/data/asset/danger1.png") !important;
    }
}
.is-danger-2 {
    .el-dialog {
        background-image: url("~@/view/client/component/TheCesiumMap/data/asset/danger2.png") !important;
    }
}
.is-danger-3 {
    .el-dialog {
        background-image: url("~@/view/client/component/TheCesiumMap/data/asset/danger3.png") !important;
    }
}
.is-danger-4 {
  .el-dialog {
    background-image: url("~@/view/client/component/TheCesiumMap/data/asset/danger4.png") !important;
  }
}
.is-danger {
    .el-dialog {
        background: no-repeat left top/100% 100%;
        .el-dialog__body {
            padding: 0 20px 20px;
        }
        .el-dialog__title,
        .el-dialog__close {
            color: #fff;
        }
        .el-dialog__headerbtn {
            top: 15px;
        }
        .el-dialog__header {
            padding-top: 10px;
        }
    }
    .data-table {
        color: #fff;
        td {
            border: none !important;
            text-align: left !important;
        }
    }
}
</style>

<style lang="scss" scoped>
.data-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    line-height: 25px;
    td {
        border: 1px solid #ddd;
        text-align: center;
    }
}
.bottom-btn-box {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    .btn {
        width: 80px;
        height: 22px;
        border: 1px solid #8ce8fc;
        border-radius: 6px;
        background-image: linear-gradient(to bottom, #fff, #8ce8fc);
        cursor: pointer;
    }
    .a-href {
        text-align: center;
        text-decoration: none;
        line-height: 20px;
        color: #000;
    }
}
.popup-land-one {
    position: absolute;
    top: 300px;
    left: 200px;
    width: 600px;
    height: 350px;
    border: 1px solid #4682b4;
    border-radius: 4px;
    background: rgba(35, 35, 35, 0.88);
    .close-btn-one {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        z-index: 9;
    }
    .close-btn-one:hover {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        z-index: 9;
    }
}
.popup-land-two {
    position: absolute;
    top: 300px;
    left: 200px;
    width: 600px;
    height: 350px;
    border: 1px solid #4682b4;
    border-radius: 4px;
    background: rgba(35, 35, 35, 0.88);
    .close-btn-two {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        z-index: 9;
    }
    .close-btn-two:hover {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        z-index: 9;
    }
}
.line-big-box {
    width: 100%;
    height: 100%;
}
</style>
